Introduction to Plotly and Dash¶

🔷 What is Plotly?¶

Plotly is a Python graphing library used to create interactive, publication-quality plots. It's built on top of D3.js, React, and Flask. It supports many types of charts like:

Line, Bar, Scatter plots

Pie and Sunburst charts

Choropleth and Mapbox maps

3D charts, Histograms, Heatmaps, and more

🧠 Plotly works well for data science, business analytics, and dashboarding, and is often used within Jupyter Notebooks, web apps, and reports.

In [2]:
!pip install dash
!pip install plotly dash
Requirement already satisfied: dash in c:\users\ashid\anaconda3\lib\site-packages (3.1.1)
Requirement already satisfied: Flask<3.2,>=1.0.4 in c:\users\ashid\anaconda3\lib\site-packages (from dash) (3.0.3)
Requirement already satisfied: Werkzeug<3.2 in c:\users\ashid\anaconda3\lib\site-packages (from dash) (3.0.3)
Requirement already satisfied: plotly>=5.0.0 in c:\users\ashid\anaconda3\lib\site-packages (from dash) (5.24.1)
Requirement already satisfied: importlib-metadata in c:\users\ashid\anaconda3\lib\site-packages (from dash) (7.0.1)
Requirement already satisfied: typing-extensions>=4.1.1 in c:\users\ashid\anaconda3\lib\site-packages (from dash) (4.11.0)
Requirement already satisfied: requests in c:\users\ashid\anaconda3\lib\site-packages (from dash) (2.32.3)
Requirement already satisfied: retrying in c:\users\ashid\anaconda3\lib\site-packages (from dash) (1.4.0)
Requirement already satisfied: nest-asyncio in c:\users\ashid\anaconda3\lib\site-packages (from dash) (1.6.0)
Requirement already satisfied: setuptools in c:\users\ashid\anaconda3\lib\site-packages (from dash) (75.1.0)
Requirement already satisfied: Jinja2>=3.1.2 in c:\users\ashid\anaconda3\lib\site-packages (from Flask<3.2,>=1.0.4->dash) (3.1.4)
Requirement already satisfied: itsdangerous>=2.1.2 in c:\users\ashid\anaconda3\lib\site-packages (from Flask<3.2,>=1.0.4->dash) (2.2.0)
Requirement already satisfied: click>=8.1.3 in c:\users\ashid\anaconda3\lib\site-packages (from Flask<3.2,>=1.0.4->dash) (8.1.7)
Requirement already satisfied: blinker>=1.6.2 in c:\users\ashid\anaconda3\lib\site-packages (from Flask<3.2,>=1.0.4->dash) (1.6.2)
Requirement already satisfied: tenacity>=6.2.0 in c:\users\ashid\anaconda3\lib\site-packages (from plotly>=5.0.0->dash) (8.2.3)
Requirement already satisfied: packaging in c:\users\ashid\anaconda3\lib\site-packages (from plotly>=5.0.0->dash) (24.1)
Requirement already satisfied: MarkupSafe>=2.1.1 in c:\users\ashid\anaconda3\lib\site-packages (from Werkzeug<3.2->dash) (2.1.3)
Requirement already satisfied: zipp>=0.5 in c:\users\ashid\anaconda3\lib\site-packages (from importlib-metadata->dash) (3.17.0)
Requirement already satisfied: charset-normalizer<4,>=2 in c:\users\ashid\anaconda3\lib\site-packages (from requests->dash) (3.3.2)
Requirement already satisfied: idna<4,>=2.5 in c:\users\ashid\anaconda3\lib\site-packages (from requests->dash) (3.7)
Requirement already satisfied: urllib3<3,>=1.21.1 in c:\users\ashid\anaconda3\lib\site-packages (from requests->dash) (2.2.3)
Requirement already satisfied: certifi>=2017.4.17 in c:\users\ashid\anaconda3\lib\site-packages (from requests->dash) (2025.1.31)
Requirement already satisfied: colorama in c:\users\ashid\anaconda3\lib\site-packages (from click>=8.1.3->Flask<3.2,>=1.0.4->dash) (0.4.6)
Requirement already satisfied: plotly in c:\users\ashid\anaconda3\lib\site-packages (5.24.1)
Requirement already satisfied: dash in c:\users\ashid\anaconda3\lib\site-packages (3.1.1)
Requirement already satisfied: tenacity>=6.2.0 in c:\users\ashid\anaconda3\lib\site-packages (from plotly) (8.2.3)
Requirement already satisfied: packaging in c:\users\ashid\anaconda3\lib\site-packages (from plotly) (24.1)
Requirement already satisfied: Flask<3.2,>=1.0.4 in c:\users\ashid\anaconda3\lib\site-packages (from dash) (3.0.3)
Requirement already satisfied: Werkzeug<3.2 in c:\users\ashid\anaconda3\lib\site-packages (from dash) (3.0.3)
Requirement already satisfied: importlib-metadata in c:\users\ashid\anaconda3\lib\site-packages (from dash) (7.0.1)
Requirement already satisfied: typing-extensions>=4.1.1 in c:\users\ashid\anaconda3\lib\site-packages (from dash) (4.11.0)
Requirement already satisfied: requests in c:\users\ashid\anaconda3\lib\site-packages (from dash) (2.32.3)
Requirement already satisfied: retrying in c:\users\ashid\anaconda3\lib\site-packages (from dash) (1.4.0)
Requirement already satisfied: nest-asyncio in c:\users\ashid\anaconda3\lib\site-packages (from dash) (1.6.0)
Requirement already satisfied: setuptools in c:\users\ashid\anaconda3\lib\site-packages (from dash) (75.1.0)
Requirement already satisfied: Jinja2>=3.1.2 in c:\users\ashid\anaconda3\lib\site-packages (from Flask<3.2,>=1.0.4->dash) (3.1.4)
Requirement already satisfied: itsdangerous>=2.1.2 in c:\users\ashid\anaconda3\lib\site-packages (from Flask<3.2,>=1.0.4->dash) (2.2.0)
Requirement already satisfied: click>=8.1.3 in c:\users\ashid\anaconda3\lib\site-packages (from Flask<3.2,>=1.0.4->dash) (8.1.7)
Requirement already satisfied: blinker>=1.6.2 in c:\users\ashid\anaconda3\lib\site-packages (from Flask<3.2,>=1.0.4->dash) (1.6.2)
Requirement already satisfied: MarkupSafe>=2.1.1 in c:\users\ashid\anaconda3\lib\site-packages (from Werkzeug<3.2->dash) (2.1.3)
Requirement already satisfied: zipp>=0.5 in c:\users\ashid\anaconda3\lib\site-packages (from importlib-metadata->dash) (3.17.0)
Requirement already satisfied: charset-normalizer<4,>=2 in c:\users\ashid\anaconda3\lib\site-packages (from requests->dash) (3.3.2)
Requirement already satisfied: idna<4,>=2.5 in c:\users\ashid\anaconda3\lib\site-packages (from requests->dash) (3.7)
Requirement already satisfied: urllib3<3,>=1.21.1 in c:\users\ashid\anaconda3\lib\site-packages (from requests->dash) (2.2.3)
Requirement already satisfied: certifi>=2017.4.17 in c:\users\ashid\anaconda3\lib\site-packages (from requests->dash) (2025.1.31)
Requirement already satisfied: colorama in c:\users\ashid\anaconda3\lib\site-packages (from click>=8.1.3->Flask<3.2,>=1.0.4->dash) (0.4.6)
In [3]:
#Verify installation
import plotly.express as px
import dash
from dash import html
In [4]:
#simple Plotly plot:
import plotly.express as px

df = px.data.gapminder().query("year == 2007")
fig = px.scatter(df, x="gdpPercap", y="lifeExp", size="pop", color="continent", hover_name="country", log_x=True)
fig.show()

🔶 What is Dash?¶

Dash is a Python framework built by Plotly that helps you create interactive web applications with pure Python (no need to know HTML/CSS/JS).

It’s used to create data dashboards where users can:

Filter and explore data dynamically

Interact with charts and tables

Update visuals based on inputs (dropdowns, sliders, buttons)

In [9]:
from dash import Dash, html

app = Dash(__name__)

app.layout = html.Div("Hello!")

if __name__ == '__main__':
    app.run(debug=True, port=8052)  # Use an unused port

Why Use Interactive Visualizations?¶

Feature Benefit
🔍 Zoom, hover, and filter Explore data in more depth, focus on specific insights
🧠 Data storytelling Make complex data easier to understand
🧑‍💼 User-driven insights Let users explore what's important to them
🖥️ Dashboards & apps Create real-time, dynamic visual reporting systems
📊 Multidimensional comparison Handle more variables (e.g., size, color, animation) in one view

🧠 Anatomy of a Dash Application¶

A basic Dash app has 3 main components:

1️⃣ Import Packages¶

You need to import Dash core libraries:

import dash
from dash import html, dcc
  • html → for layout elements like Div, H1, P, Button, etc.
  • dcc (Dash Core Components) → for interactive components like Dropdown, Graph, Slider, etc.

2️⃣ Initialize the App¶

You create a Dash app instance:

app = dash.Dash(__name__)

This sets up the web app and allows you to build its layout and behavior.


3️⃣ Define the Layout¶

The layout is the visual structure (what users see). It's built using nested html and dcc components:

app.layout = html.Div([
    html.H1("My First Dash App"),
    dcc.Input(id='my-input', value='Hello', type='text'),
    html.Div(id='my-output')
])

Every component can have:

  • id → used to link input/output callbacks
  • children → nested content or text
  • other properties like value, style, className, etc.

4️⃣ Add Callbacks (Interactivity)¶

Dash uses callbacks to make the app dynamic.

from dash.dependencies import Input, Output

@app.callback(
    Output('my-output', 'children'),   # What to update
    Input('my-input', 'value')         # What triggers the update
)
def update_output(input_value):
    return f"You typed: {input_value}"

🌀 This makes the app reactive — the output updates when the input changes.


5️⃣ Run the Server¶

This starts the local web server:

if __name__ == '__main__':
    app.run(debug=True)  # Use .run(), not .run_server()

📌 Summary:¶

Part Purpose
Import Bring in Dash components
app = dash.Dash(__name__) Initializes the app
app.layout = ... Sets the UI structure
@app.callback Adds interactivity
app.run() Runs the web server
In [13]:
# Full Minimal Dash App Example:
import dash
from dash import html, dcc
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1("Interactive App"),
    dcc.Input(id='my-input', value='Dash', type='text'),
    html.Div(id='my-output')
])

@app.callback(
    Output('my-output', 'children'),
    Input('my-input', 'value')
)
def update_output_div(value):
    return f'Hello, {value}!'

if __name__ == '__main__':
    app.run(debug=True,port=8052)

🧩 Frontend vs Backend — General Concepts¶

Aspect Frontend Backend
Also known as Client-side Server-side
Visible to user? ✅ Yes ❌ No
Built with HTML, CSS, JavaScript, Dash (html, dcc) Python, Flask (in Dash), databases
Main job Displays UI, handles interaction Handles logic, data processing, APIs
Example Buttons, graphs, dropdowns Data filtering, ML models, databases
Runs where? In the user's browser On the server (your computer or web server)

🔷 In Dash, Both Frontend & Backend Are in Python¶

Dash simplifies full-stack web apps:

  • Frontend = built using dash.html and dash.dcc components (which get rendered into HTML/JS)
  • Backend = Python functions (callbacks) that process data, logic, ML models

🧠 Anatomy of Frontend in Dash¶

app.layout = html.Div([
    html.H1("My Dashboard"),  # Title
    dcc.Input(id='user-input', type='text'),  # Input field
    html.Div(id='output')  # Placeholder for dynamic output
])

This is your UI layout — the part users see.


🧠 Anatomy of Backend in Dash¶

@app.callback(
    Output('output', 'children'),
    Input('user-input', 'value')
)
def process_input(value):
    return f"You typed: {value}"

This is your logic — Python code runs on the server, not in the browser.


🔁 Full Cycle (How Frontend & Backend Communicate)¶

  1. User types into the input (frontend)
  2. Dash sends the input to the callback function (backend)
  3. Backend runs Python code and returns output
  4. Frontend updates automatically — no page reload needed

📌 Summary in Dash Terms¶

Component Frontend or Backend? Role
html.Div, dcc.Input, dcc.Graph Frontend Build interface
@app.callback functions Backend Handle logic and data
app.run() Backend Starts web server
User sees & clicks Frontend Browser
Python reacts to inputs Backend Server
In [18]:
#Full Dash App Code (with Frontend & Backend)
import dash
from dash import html, dcc
from dash.dependencies import Input, Output

# ✅ Backend: Create the Dash app
app = dash.Dash(__name__)

# ✅ Frontend: App layout (UI)
app.layout = html.Div([
    html.H1("Simple Interactive Dash App"),  # Heading

    html.Label("Enter your name:"),  # Label
    dcc.Input(id='name-input', type='text', value='', placeholder='Type here...'),

    html.Br(), html.Br(),

    html.Div(id='greeting-output')  # Output placeholder
])

# ✅ Backend: Callback logic (interactivity)
@app.callback(
    Output(component_id='greeting-output', component_property='children'),
    Input(component_id='name-input', component_property='value')
)
def update_greeting(name):
    if name:
        return f"👋 Hello, {name}! Welcome to Dash!"
    else:
        return "Please enter your name."

# ✅ Backend: Run the server
if __name__ == '__main__':
    app.run(debug=True,port=8052)
This app:¶

Has an input box (frontend)

Updates the output text dynamically (backend)

Uses only Python

🔍 Explanation¶

🖼️ Frontend (UI Layout)¶

app.layout = html.Div([...])
  • Contains components like html.H1, dcc.Input, and html.Div
  • What users see and interact with

🧠 Backend (Python Logic)¶

@app.callback(...)
def update_greeting(name):
    ...
  • Handles input logic and generates the response
  • Updates the output based on what the user types

✅ To Run This App:¶

  1. Install Dash (only once):
pip install dash
  1. Save this code in a file like app.py

  2. Run the app:

python app.py
  1. Open in your browser:
http://127.0.0.1:8050/
In [22]:
import dash
from dash import html

# Create the app
app = dash.Dash(__name__)

# Define the layout (what the user sees)
app.layout = html.Div("🌍 Hello, World from Dash!")

# Run the app
if __name__ == '__main__':
    app.run(debug=True,port=8052)